<template>
	<div>
		<div class="commonPop" :class="show ? 'show' : ''" @click="close"></div>
		<div class="commonMain flex" :class="show ? 'show' : ''" @click.stop>
			<div @click="close" class="close iconfont icon-yuyinguanbi"></div>
			<div class="head flex">
				<img src="https://pc.meitudata.com/x-design/img/logo2-dark.90ec4009.svg" />
			</div>
			<div class="btnFlex flex">
				<div class="item flex">
					<span class="iconfont icon-xihuan" style="font-size: 18px;"></span>
					<span class="text">喜欢</span>
				</div>
				<div class="item flex">
					<span class="iconfont icon-shanchu1" style="font-size: 15px;"></span>
					<span class="text">删除</span>
				</div>
				<div class="item flex">
					<span class="iconfont icon-qingkong" style="font-size: 16px;"></span>
					<span class="text">清空列表</span>
				</div>
			</div>
			<div class="tableFlex flex">
				<div class="select"></div>
				<div class="name ell">歌曲</div>
				<div class="person ell">创作人</div>
				<div class="time ell">时长</div>
			</div>
			<div class="listGroup">
				<div class="item flex">
					<div class="select iconfont icon-zhengque"></div>
					<div class="name flex">
						<div class="left ell">1. 长夜星光</div>
						<div class="right flex">
							<div class="btnItem iconfont icon-bofang2" style="font-size: 19px;padding: 0 0 0 3px;line-height: 34px;"></div>
							<div class="btnItem iconfont icon-shanchu"></div>
						</div>
					</div>
					<div class="person ell">赵总</div>
					<div class="time ell">03:45</div>
				</div>
				<div class="item flex">
					<div class="select"></div>
					<div class="name flex">
						<div class="left ell">2. 田间的少年 - 茶田篇</div>
						<div class="right flex">
							<div class="btnItem iconfont icon-bofang2" style="font-size: 19px;padding: 0 0 0 3px;line-height: 34px;"></div>
							<div class="btnItem iconfont icon-shanchu"></div>
						</div>
					</div>
					<div class="person ell">赵总</div>
					<div class="time ell">03:45</div>
				</div>
				<div class="item flex">
					<div class="select"></div>
					<div class="name flex">
						<div class="left ell">3. 3MV浮木</div>
						<div class="right flex">
							<div class="btnItem iconfont icon-bofang2" style="font-size: 19px;padding: 0 0 0 3px;line-height: 34px;"></div>
							<div class="btnItem iconfont icon-shanchu"></div>
						</div>
					</div>
					<div class="person ell">何刚</div>
					<div class="time ell">03:45</div>
				</div>
				<div class="item flex">
					<div class="select"></div>
					<div class="name flex">
						<div class="left ell">4. 酷毙了</div>
						<div class="right flex">
							<div class="btnItem iconfont icon-bofang2" style="font-size: 19px;padding: 0 0 0 3px;line-height: 34px;"></div>
							<div class="btnItem iconfont icon-shanchu"></div>
						</div>
					</div>
					<div class="person ell">何刚</div>
					<div class="time ell">03:45</div>
				</div>
				<div class="item flex">
					<div class="select"></div>
					<div class="name flex">
						<div class="left ell">5. 珍惜今天</div>
						<div class="right flex">
							<div class="btnItem iconfont icon-bofang2" style="font-size: 19px;padding: 0 0 0 3px;line-height: 34px;"></div>
							<div class="btnItem iconfont icon-shanchu"></div>
						</div>
					</div>
					<div class="person ell">羊水二</div>
					<div class="time ell">03:45</div>
				</div>
				<div class="item flex">
					<div class="select iconfont icon-zhengque"></div>
					<div class="name flex">
						<div class="left ell">1. 长夜星光</div>
						<div class="right flex">
							<div class="btnItem iconfont icon-bofang2" style="font-size: 19px;padding: 0 0 0 3px;line-height: 34px;"></div>
							<div class="btnItem iconfont icon-shanchu"></div>
						</div>
					</div>
					<div class="person ell">赵总</div>
					<div class="time ell">03:45</div>
				</div>
				<div class="item flex">
					<div class="select"></div>
					<div class="name flex">
						<div class="left ell">2. 田间的少年 - 茶田篇</div>
						<div class="right flex">
							<div class="btnItem iconfont icon-bofang2" style="font-size: 19px;padding: 0 0 0 3px;line-height: 34px;"></div>
							<div class="btnItem iconfont icon-shanchu"></div>
						</div>
					</div>
					<div class="person ell">赵总</div>
					<div class="time ell">03:45</div>
				</div>
				<div class="item flex">
					<div class="select"></div>
					<div class="name flex">
						<div class="left ell">3. 3MV浮木</div>
						<div class="right flex">
							<div class="btnItem iconfont icon-bofang2" style="font-size: 19px;padding: 0 0 0 3px;line-height: 34px;"></div>
							<div class="btnItem iconfont icon-shanchu"></div>
						</div>
					</div>
					<div class="person ell">何刚</div>
					<div class="time ell">03:45</div>
				</div>
				<div class="item flex">
					<div class="select"></div>
					<div class="name flex">
						<div class="left ell">4. 酷毙了</div>
						<div class="right flex">
							<div class="btnItem iconfont icon-bofang2" style="font-size: 19px;padding: 0 0 0 3px;line-height: 34px;"></div>
							<div class="btnItem iconfont icon-shanchu"></div>
						</div>
					</div>
					<div class="person ell">何刚</div>
					<div class="time ell">03:45</div>
				</div>
				<div class="item flex">
					<div class="select"></div>
					<div class="name flex">
						<div class="left ell">5. 珍惜今天</div>
						<div class="right flex">
							<div class="btnItem iconfont icon-bofang2" style="font-size: 19px;padding: 0 0 0 3px;line-height: 34px;"></div>
							<div class="btnItem iconfont icon-shanchu"></div>
						</div>
					</div>
					<div class="person ell">羊水二</div>
					<div class="time ell">03:45</div>
				</div>
				<div class="item flex">
					<div class="select iconfont icon-zhengque"></div>
					<div class="name flex">
						<div class="left ell">1. 长夜星光</div>
						<div class="right flex">
							<div class="btnItem iconfont icon-bofang2" style="font-size: 19px;padding: 0 0 0 3px;line-height: 34px;"></div>
							<div class="btnItem iconfont icon-shanchu"></div>
						</div>
					</div>
					<div class="person ell">赵总</div>
					<div class="time ell">03:45</div>
				</div>
				<div class="item flex">
					<div class="select"></div>
					<div class="name flex">
						<div class="left ell">2. 田间的少年 - 茶田篇</div>
						<div class="right flex">
							<div class="btnItem iconfont icon-bofang2" style="font-size: 19px;padding: 0 0 0 3px;line-height: 34px;"></div>
							<div class="btnItem iconfont icon-shanchu"></div>
						</div>
					</div>
					<div class="person ell">赵总</div>
					<div class="time ell">03:45</div>
				</div>
				<div class="item flex">
					<div class="select"></div>
					<div class="name flex">
						<div class="left ell">3. 3MV浮木</div>
						<div class="right flex">
							<div class="btnItem iconfont icon-bofang2" style="font-size: 19px;padding: 0 0 0 3px;line-height: 34px;"></div>
							<div class="btnItem iconfont icon-shanchu"></div>
						</div>
					</div>
					<div class="person ell">何刚</div>
					<div class="time ell">03:45</div>
				</div>
				<div class="item flex">
					<div class="select"></div>
					<div class="name flex">
						<div class="left ell">4. 酷毙了</div>
						<div class="right flex">
							<div class="btnItem iconfont icon-bofang2" style="font-size: 19px;padding: 0 0 0 3px;line-height: 34px;"></div>
							<div class="btnItem iconfont icon-shanchu"></div>
						</div>
					</div>
					<div class="person ell">何刚</div>
					<div class="time ell">03:45</div>
				</div>
				<div class="item flex">
					<div class="select"></div>
					<div class="name flex">
						<div class="left ell">5. 珍惜今天</div>
						<div class="right flex">
							<div class="btnItem iconfont icon-bofang2" style="font-size: 19px;padding: 0 0 0 3px;line-height: 34px;"></div>
							<div class="btnItem iconfont icon-shanchu"></div>
						</div>
					</div>
					<div class="person ell">羊水二</div>
					<div class="time ell">03:45</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				// 显示隐藏
				show: false,
				
			}
		},
		methods: {
			
			// 打开弹窗
			open(){
				this.show = true;
			},
			
			// 关闭弹窗
			close(){
				this.show = false;
			},
			
		},
		asyncData({ app }) {
			
		},
	}
</script>

<style lang="scss" scoped>
	.commonPop{
		background: rgba(0,0,0,0.55);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2000;
		visibility: hidden;
		opacity: 0;
		transition: 0.2s all;
		backdrop-filter: blur(10px);
		&.show{
			opacity: 1;
			visibility: visible;
		}
	}
	.commonMain{
		position: fixed;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 1200px;
		height: 750px;
		padding: 35px 35px 0 35px;
		max-height: 90vh;
		max-width: 90vw;
		z-index: 2001;
		overflow: hidden;
		top: -100%;
		border-radius: 10px;
		transition: 0.15s all;
		background: #181b21;
		flex-direction: column;
		&.show{
			top: 50%;
		}
		.close{
			position: absolute;
			right: 20px;
			top: 20px;
			font-size: 20px;
			color: #c3c3c3;
			opacity: 0.4;
			line-height: 30px;
			width: 30px;
			text-align: center;
			cursor: pointer;
			transition: 0.2s all;
			&:hover{
				opacity: 0.8;
			}
		}
		.head{
			flex-direction: row;
			align-items: center;
			img{
				width: 160px;
			}
		}
		.btnFlex{
			margin-top: 26px;
			flex-direction: row;
			align-items: center;
			.item{
				margin-right: 12px;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				width: 130px;
				height: 38px;
				border: 1px solid rgba(255,255,255,0.12);
				transition: 0.2s all;
				cursor: pointer;
				&:hover{
					border-color: #FFF;
					.iconfont{
						color: rgba(255,255,255,0.65);
					}
					.text{
						color: rgba(255,255,255,0.85);
					}
				}
				.iconfont{
					margin-right: 5px;
					color: rgba(255,255,255,0.55);
				}
				.text{
					font-size: 15px;
					color: rgba(255,255,255,0.75);
				}
			}
		}
		.tableFlex{
			flex-direction: row;
			align-items: center;
			margin-top: 30px;
			.select{
				width: 18px;
				height: 18px;
				line-height: 18px;
				border: 1px solid rgba(255,255,255,0.12);
				font-size: 10px;
				text-align: center;
				color: #FFF;
				margin-right: 30px;
			}
			.name{
				flex: 1;
				width: 0;
				font-size: 15px;
				color: rgba(255,255,255,0.7);
				margin-right: 20px;
			}
			.person{
				width: 180px;
				font-size: 15px;
				color: rgba(255,255,255,0.7);
				margin-right: 20px;
			}
			.time{
				width: 110px;
				font-size: 15px;
				color: rgba(255,255,255,0.7);
			}
		}
		.listGroup{
			margin-top: 23px;
			flex: 1;
			height: 0;
			overflow-y: auto;
			&::-webkit-scrollbar {
				display: none;
			}
			.item{
				flex-direction: row;
				align-items: center;
				height: 35px;
				margin-bottom: 15px;
				&:nth-last-child(1){
					margin-bottom: 0;
				}
				.select{
					width: 18px;
					height: 18px;
					line-height: 18px;
					border: 1px solid rgba(255,255,255,0.12);
					font-size: 10px;
					text-align: center;
					color: #FFF;
					margin-right: 30px;
					transition: 0.2s all;
					cursor: pointer;
					&:hover{
						border-color: rgba(255,255,255,0.85);
					}
				}
				.name{
					flex: 1;
					width: 0;
					margin-right: 20px;
					flex-direction: row;
					align-items: center;
					.left{
						font-size: 15px;
						color: rgba(255,255,255,0.7);
						margin-right: 20px;
						cursor: pointer;
						flex: 1;
						width: 0;
						&:hover{
							text-decoration: underline;
							color: rgba(255,255,255,0.85);
						}
					}
					.right{
						display: none;
						margin-left: 15px;
						flex-direction: row;
						align-items: center;
						.btnItem{
							width: 35px;
							height: 35px;
							line-height: 35px;
							text-align: center;
							border: 1px solid rgba(255,255,255,0.12);
							font-size: 16px;
							color: rgba(255,255,255,0.65);
							margin-left: 15px;
							border-radius: 50%;
							transition: 0.2s all;
							cursor: pointer;
							&:hover{
								border-color: rgba(255,255,255,0.85);
								color: rgba(255,255,255,0.85);
							}
						}
					}
				}
				.person{
					width: 180px;
					font-size: 15px;
					color: rgba(255,255,255,0.7);
					margin-right: 20px;
					transition: 0.2s all;
					cursor: pointer;
					&:hover{
						text-decoration: underline;
						color: rgba(255,255,255,0.85);
					}
				}
				.time{
					width: 110px;
					font-size: 15px;
					color: rgba(255,255,255,0.7);
				}
				&:hover{
					.name .right{
						display: flex;
					}
				}
			}
		}
	}
</style>